<template>
  <KView class="address-item">
    <KView class="address-item-info">
      <KView>{{address.buyerName}}</KView>
      <KView>{{address.buyerPhone}}</KView>
      <KView class="address-item-text">{{address.getFullAddress()}}</KView>
    </KView>
    <KView class="address-item-line"></KView>

    <KView class="address-item-footer clearfix">
      <KView class="address-item-checked">
        <sys-checkbox :value="address===defaultAddress" :size="35" :has-change="false" @click="checkboxClick">设置默认地址</sys-checkbox>
      </KView>
      <KView class="address-item-btns clearfix">
        <KView class="address-item-btns-item clearfix" @click="updateAddress">
          <KView class="address-item-btns-icon">
            <sys-svg name="edit" color="#9a9a9a"></sys-svg>
          </KView>
          <KView>编辑</KView>
        </KView>
        <KView class="address-item-btns-item clearfix" @click="deleteAddress">
          <KView class="address-item-btns-icon">
            <sys-svg name="remove" color="#9a9a9a"></sys-svg>
          </KView>
          <KView>删除</KView>
        </KView>
      </KView>
    </KView>
  </KView>
</template>

<script>
  import SysCheckbox from 'common/sysCheckbox';
  import SysSvg from 'common/sysSvg';

  export default {
    props: {
      address: {
        type: Object,
        required: true
      },
      defaultAddress: {
        type: Object,
        required: true
      }
    },

    data() {
      return {};
    },

    methods: {
      checkboxClick() {
        this.$emit('change-default', this.address);
      },

      updateAddress() {
        this.$emit('update-address', this.address);
      },

      deleteAddress() {
        this.$emit('delete-address', this.address);
      }
    },

    components: {
      SysCheckbox,
      SysSvg
    }
  };

</script>

<style lang="scss">
  .address-item {
    padding: formatPx(40) 0 formatPx(30);
    box-shadow: 0 formatPx(2) formatPx(10) formatPx(5) rgba(0, 0, 0, .14);
    font-size: formatPx(26);
    color: #333333;

    .address-item-info {
      padding: 0 formatPx(30);
      margin-bottom: formatPx(34);

      >div {
        margin-bottom: formatPx(16);

        &:last-child {
          margin-bottom: 0;
        }
      }

      .address-item-text {
        line-height: 1.3;
      }
    }

    .address-item-line {
      height: 1px;
      background: #DADADA;
    }

    .address-item-footer {
      margin-top: formatPx(28);
      padding: 0 formatPx(30);
      height: formatPx(35);

      .address-item-checked {
        float: left;
        height: 100%;

        .sys-checkbox .sys-checkbox-text {
          font-size: formatPx(26);
          color: #333333;
          line-height: formatPx(35);
        }
      }

      .address-item-btns {
        float: right;
        height: 100%;

        .address-item-btns-item {
          float: left;
          width: formatPx(100);
          height: 100%;
          margin-right: formatPx(35);

          &:last-child {
            margin-right: 0;
          }

          >div {
            float: left;
            height: 100%;
            line-height: formatPx(35);
          }

          .address-item-btns-icon {
            width: formatPx(30);
            margin-right: formatPx(14);
          }
        }
      }
    }
  }

</style>
